<template>
  <demo-content :title="title">
    <div style="position: relative">
      <div class="tools">
        <stroke-color-selector v-model:value="strokeColor" />
        <fill-color-selector v-model:value="fillColor" />
        <div>
          <span>Line width: </span>
          <select v-model="lineWidth">
            <option v-for="i of 6" :value="i">{{ `${i}.0` }}</option>
          </select>
        </div>
        <label>
          <span>Fill: </span>
          <input type="checkbox" v-model="fill" />
        </label>
        <label>
          Guidewires:
          <input type="checkbox" v-model="guidewries" />
        </label>
        <button @click="initCtx">Erase all</button>
      </div>
      <canvas ref="canvasRef" width="800" height="600"></canvas>
    </div>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { DrawingAssist, Point, arc, drawGrid, rect } from "./utils";
import { FillColorSelector, StrokeColorSelector } from "./components";

const title = "圆形绘制工具";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
const strokeColor = ref("red");
const fillColor = ref("#ff000088");
const lineWidth = ref(5);
const fill = ref(true);
const guidewries = ref(true);

let ctx: CanvasRenderingContext2D;
const initCtx = () => {
  ctx.beginPath();
  rect.clear(ctx);
  drawGrid(ctx, { stepx: 10, stepy: 10 });
};
onMounted(() => {
  const canvas = canvasRef.value!;
  ctx = canvas.getContext("2d")!;
  initCtx();
  function draw(ctx: CanvasRenderingContext2D, startPos: Point, endPos: Point) {
    const { x, y } = startPos;
    const { x: x1, y: y1 } = endPos;
    const radius = Math.sqrt((x - x1) ** 2 + (y - y1) ** 2);
    const fillStyle = fill.value ? fillColor.value : undefined;
    arc.draw(ctx, {
      x,
      y,
      radius,
      fillStyle,
      lineWidth: lineWidth.value,
      strokeStyle: strokeColor.value,
    });
  }
  DrawingAssist.create(ctx).setDrawingCallee(draw).setGuidewiresRef(guidewries);
});
</script>

<style src="./default.css" scoped></style>
<style scoped>
.tools > * {
  margin-right: 20px;
  display: inline-block;
}
</style>
